<template>
  <div class="salary-statistics">
    <div class="page-header">
      <div class="page-title">薪资统计</div>
    </div>
    <el-card>
      <el-row :gutter="24">
        <el-col :span="8">
          <div class="stat-item">
            <div class="stat-label">总发放金额</div>
            <div class="stat-value">¥{{ formatMoney(statistics.totalAmount) }}</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="stat-item">
            <div class="stat-label">发放人数</div>
            <div class="stat-value">{{ statistics.totalCount }}</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="stat-item">
            <div class="stat-label">已发放人数</div>
            <div class="stat-value success">{{ statistics.paidCount }}</div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="24" style="margin-top: 24px;">
        <el-col :span="8">
          <div class="stat-item">
            <div class="stat-label">未发放人数</div>
            <div class="stat-value danger">{{ statistics.unpaidCount }}</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="stat-item">
            <div class="stat-label">已确认人数</div>
            <div class="stat-value warning">{{ statistics.confirmedCount }}</div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const statistics = ref({
  totalAmount: 0,
  totalCount: 0,
  paidCount: 0,
  unpaidCount: 0,
  confirmedCount: 0
})

const formatMoney = (amount) => {
  if (!amount) return '0.00'
  return Number(amount).toFixed(2)
}

const fetchStatistics = async () => {
  try {
    const response = await axios.get('/salary/statistics')
    Object.assign(statistics.value, response.data)
  } catch (error) {
    ElMessage.error('获取薪资统计失败')
  }
}

onMounted(() => {
  fetchStatistics()
})
</script>

<style scoped>
.salary-statistics {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.page-title {
  font-size: 18px;
  font-weight: bold;
}
.stat-item {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  margin-bottom: 12px;
}
.stat-label {
  color: #888;
  font-size: 14px;
  margin-bottom: 8px;
}
.stat-value {
  font-size: 24px;
  font-weight: bold;
}
.stat-value.success {
  color: #67c23a;
}
.stat-value.danger {
  color: #f56c6c;
}
.stat-value.warning {
  color: #e6a23c;
}
</style> 